<script lang="tsx">
/**
 * 页面生成器
 */
export default {
  name: "page-generation"
}
</script>

<script lang="tsx" setup>
import {defineTabsForm, TabsForm} from "../../index.ts"
import MainForm from "./components/main-form/index.vue"
import SearchForm from "./components/searchForm/index.vue"
import ProgramForm from "./components/program-form/index.vue"
import TableForm from "./components/table-form/index.vue"
import OperationForm from "./components/operation-form/index.vue"
import SheetForm from "./components/sheet-form/index.vue"
import ContainerForm from "./components/container-form/index.vue"
import {ref} from "vue"
import {GenerationTabsEnum} from "./index.ts"

/**
 * tab栏实例
 */
const tabsFormRef = ref()
const tabsForm = defineTabsForm({
  els: [
    {
      label: "主体",
      value: {
        type: GenerationTabsEnum.主体
      }
    },
    {
      label: "搜索栏",
      value: {
        type: GenerationTabsEnum.搜索栏
      }
    },
    {
      label: "功能栏",
      value: {
        type: GenerationTabsEnum.功能栏
      }
    },
    {
      label: "表格",
      value: {
        type: GenerationTabsEnum.表格
      }
    },
    {
      label: "操作栏",
      value: {
        type: GenerationTabsEnum.操作栏
      }
    },
    {
      label: "表单",
      value: {
        type: GenerationTabsEnum.表单
      }
    }
  ]
})

/**
 * tab栏值改变
 */
const tabsFormData = ref(GenerationTabsEnum.主体)
const handleTabsChange = () => {
  const result = tabsFormRef.value.getTabsFormData()
  tabsFormData.value = result.value.type
}

/**
 * 组件实例
 */
const mainFormRef = ref()
const searchFormRef = ref()
const programFormRef = ref()
const tableFormRef = ref()
const operationFormRef = ref()
const sheetFormRef = ref()

/**
 * 应用
 */
const containerFormRef = ref()
const handleApply = async () => {
  const mainFormData = await mainFormRef.value.getFormData()
  const searchFormData = await searchFormRef.value.getFormData()
  const programFormData = await programFormRef.value.getFormData()
  const tableFormData = await tableFormRef.value.getFormData()
  const operationFormData = await operationFormRef.value.getFormData()
  const sheetFormData = await sheetFormRef.value.getFormData()
  containerFormRef.value.setFormData({
    ...mainFormData,
    searchForm: searchFormData,
    programForm: programFormData,
    table: {
      ...tableFormData,
      operationForm: operationFormData
    },
    form: sheetFormData
  })
}
</script>

<template>
  <div class="page-generation">
    <div class="generation-container">
      <ContainerForm ref="containerFormRef"/>
    </div>
    <div class="generation-form">
      <div class="form-header">
        页面配置
      </div>
      <div class="form-tab">
        <TabsForm ref="tabsFormRef" :tabsFormModel="tabsForm" @tabsFormChange="handleTabsChange"/>
      </div>
      <div class="form-body">
        <MainForm v-show="tabsFormData === GenerationTabsEnum.主体" ref="mainFormRef"/>
        <SearchForm v-show="tabsFormData === GenerationTabsEnum.搜索栏" ref="searchFormRef"/>
        <ProgramForm v-show="tabsFormData === GenerationTabsEnum.功能栏" ref="programFormRef"/>
        <TableForm v-show="tabsFormData === GenerationTabsEnum.表格" ref="tableFormRef"/>
        <OperationForm v-show="tabsFormData === GenerationTabsEnum.操作栏" ref="operationFormRef"/>
        <SheetForm v-show="tabsFormData === GenerationTabsEnum.表单" ref="sheetFormRef"/>
      </div>
      <div class="form-footer">
        <el-button style="width: 100%" type="primary" @click="handleApply">应用</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-generation {
  width: 100%;
  height: 100%;
  background-color: #efefef;
  display: flex;

  .generation-container {
    flex: 1;
  }

  .generation-form {
    flex: 0;
    flex-basis: 400px;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 10px;

    .form-header {
      flex: 0;
      text-align: center;
      padding-top: 10px;
      font-size: 16px;
    }

    .form-body {
      overflow: auto;
      flex: 1;
      padding: 10px;
    }

    .form-footer {
      padding-top: 10px;
      flex: 0;
    }
  }
}
</style>